<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="字段库" @ok="handleSubmit" :width="750" :minHeight="500" destroyOnClose>
    <BasicTable @register="registerTable">
      <template #form-submitBefore>
        <a-button type="primary" @click="handleForm(false, {})" style="margin-left: -90px">
          <Icon icon="i-ant-design:plus-outlined" /> {{ t("新增") }}
        </a-button>
      </template>
    </BasicTable>
    <InputForm @register="registerInputFormDrawer" @success="handleSuccess" />
  </BasicModal>
</template>
<script lang="ts" name="field-library" setup>
  import { ref } from "vue"
  import { BasicModal, useModalInner } from "/@/components/Modal"
  import { BasicTable, BasicColumn, useTable, FormSchema } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { useGlobSetting } from "/@/hooks/setting"
  import { listFieldLibrary, deleteFieldLibrary } from "../api"
  import { useMessage } from "/@/hooks/web/useMessage"
  import InputForm from "./FieldLibraryForm.vue"
  import { useRouter } from "vue-router"
  import { Icon } from "/@/components/Icon"

  const emit = defineEmits(["success", "register"])
  const { t } = useI18n("")
  const { createMessage } = useMessage()
  const glob = useGlobSetting()
  const [registerInputFormDrawer, { openDrawer: openInputFormDrawer }] = useDrawer()

  const columns: BasicColumn[] = [
    {
      title: t("字段名称"),
      dataIndex: "fieldName",
      width: 100,
    },
    {
      title: t("字段key"),
      dataIndex: "fieldKey",
      width: 100,
    },
    {
      title: t("字段备注"),
      dataIndex: "remark",
      width: 100,
    },
    {
      title: t("更新时间"),
      dataIndex: "updatedAt",
      width: 150,
      align: "center",
    },
  ]

  const searchFormSchema: FormSchema[] = [
    {
      // label: t('字段名称'),
      field: "keyWord",
      component: "Input",
      componentProps: {
        placeholder: t("字段名称/Key"),
        maxlength: 64,
      },
    },
  ]

  const actionColumn: BasicColumn = {
    width: 130,
    title: "操作",
    dataIndex: "action",
    fixed: false,
    slot: "tableActions",
    actions: (record: Recordable) => [
      {
        label: "删除",
        color: "error",
        ifShow: record.sendStatus != 1,
        // auth: 'sys:area:delete',
        popConfirm: {
          title: "是否确认删除",
          confirm: handleDelete.bind(null, record),
        },
      },
      {
        label: "编辑",
        // auth: 'sys:area:update',
        onClick: handleForm.bind(null, true, record),
      },
    ],
    dropDownActions: (record: Recordable) => [],
  }

  const [registerTable, { reload, getSelectRows }] = useTable({
    api: listFieldLibrary,
    columns: columns,
    bordered: false,
    beforeFetch: (params) => {
      return params
    },
    rowSelection: {},
    clickToRowSelect: true,
    formConfig: {
      baseColProps: { lg: 12, md: 12 },
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
      showResetButton: false,
      showSubmitButton: false,
    },
    immediate: true,

    showTableSetting: false,
    useSearchForm: true,
    isTreeTable: false,
    pagination: false,
    canResize: false,
    rowKey: "id",
    actionColumn,
  })

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {})

  async function handleDelete(record) {
    await deleteFieldLibrary({ id: record.id }, reload)
  }

  const handleForm = (isUpdate, record) => {
    openInputFormDrawer(true, { record, isUpdate })
  }

  const handleSuccess = () => {
    reload()
  }

  const handleSubmit = async () => {
    const selected = await getSelectRows()
    const data = selected.map((e) => ({
      key: e.fieldKey,
      desc: e.fieldName,
    }))
    emit("success", data)
    closeModal()
  }
</script>
